<template>

  <div>
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" >
          <el-form-item>
            <el-input  placeholder="角色名" v-model="keyWorld"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchRole">查询</el-button>
          </el-form-item>

        </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="roleList" highlight-current-row v-loading="loading" style="width: 100%;" >
        <el-table-column
            type="selection">
        </el-table-column>

        <el-table-column prop="id" label="角色id" >
        </el-table-column>

        <el-table-column prop="sn" label="角色sn" >
        </el-table-column>


        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="empower(scope.row)">授权</el-button>
          </template>
        </el-table-column>
      </el-table>

    </section>

<!--    角色授权界面-->
    <el-dialog title="角色授权" :visible.sync="addPermission" :append-to-body="true" @open="open">
      <el-form>
        <el-form-item>
          <el-tree :data="permissionTree"
                   ref="tree"
                    :props="props"
                     node-key="sn"
                    :default-checked-keys="hasPermission"
                    show-checkbox
                   @check="choseNode"></el-tree>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateRoleHasPermission">确认授权</el-button>
          <el-button @click="addEmployeeDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "role",
  data(){
    return {
      roleId:null,
      props: {
        label: 'name',
        children: 'child'
      },
      permissions:[],
      hasPermission:[],
      keyWorld:'',
      permissionTree:[],
      addPermission:false,
      loading:true,
      roleList:[],
      form:{}
    }
  },
  methods:{
    //设置当前角色所拥有的权限信息
    updateRoleHasPermission(){
      //将选中的节点数字封装成sn
      let sns = [];
      for (let i = 0; i < this.permissions.length; i++) {
        sns.push(this.permissions[i].sn)
      }
      //发送请求提交数据
      axios({
        url:'/rolePermission/updateRolePermission/'+this.roleId,
        method:'post',
        data:sns
      }).then(resp=>{
        if (resp.data.code==200) this.$message({
          message:resp.data.msg,
          type:'success'
        })
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
        //关闭角色授权对话框
        this.addPermission=false;
      })
    },
    searchRole(){

    },
    choseNode(node, resolve){
      //设置选中的sn
      let checkedNodes = resolve.checkedNodes;
      this.permissions=checkedNodes;
    },
    open(){
      setTimeout(()=>{
        this.hasPermission=[];
        //设置当前角色的id信息
        //查看当前角色所拥有的信息
        axios.get('/rolePermission/findRoleHasPermission?roleId='+this.roleId).then((resp)=>{
          if (resp.data.code==200){
            //处理数据
            let permissionList = resp.data.data;
            if (permissionList!=null&&permissionList.length>=1&&permissionList[0]!=null)
              for (let i = 0; i < permissionList.length; i++) {
                this.hasPermission.push(permissionList[i].permissionSn)
              }
            this.$nextTick(() => {
              this.$refs.tree.setCheckedKeys(this.hasPermission)
            })
          }
        })
      },0)
    },
    //角色授权
    empower(row){
      this.roleId=row.id;
      this.addPermission=true;
    },
    //加载角色列表
    loadRoleList(){
      this.loading=true;
      axios.get('/role/findList').then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          this.roleList=resp.data.data;
          //
          this.loading=false;
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
      })
    }
  },
  mounted() {
    //加载角色列表信息
    this.loadRoleList()
    //加载权限列表
    axios.get('/permission/findListByTree').then(resp=>{
      if (resp.data.code==200){
        //设置树形节点
        this.permissionTree=resp.data.data;
      }
    })
  }
}
</script>

<style scoped>

</style>